<template>
<vol-box :lazy="true"
             :model.sync="model.box1"
             title="选择商品"
             :height="400"
             :width="700">
  <div class="container">
       
    <div >
      <VolHeader
        icon="md-apps"
        text=""
        style="margin-bottom: 10px; border: 0px; "
      >
        <div slot="content"></div>
        
        <slot>
          <div >
           <Select
              style="width: 150px; margin-right: 10px"
              v-model="searchFields.distributor"
              placeholder="分销商"
              @on-change="onChange()"
            ><Option v-for="(kv, kvIndex) in distributor"
                        :key="kvIndex"
                        :value="kv.key">{{ kv.value }}</Option>
           </Select>
           <!-- <Select
              style="width: 150px; margin-right: 10px"
              v-model="searchFields.product"
              placeholder="产品名称"
            ><Option v-for="(kv, kvIndex) in product"
                        :key="kvIndex"
                        :value="kv.key">{{ kv.value }}</Option>
           </Select> -->
            <Input
              style="width: 150px; margin-right: 10px"
              v-model.number="searchFields.UserName"
              placeholder="商品名称" @input="load"
            />
            <Button type="info" ghost @click="load" style="margin-left: 20px"
              >查询</Button
            >
          </div>
        </slot>
      </VolHeader>

      <vol-table
        ref="table1"
        :loadKey="true"
        :columns="columns"
        :pagination-hide="false"
        :height="280"
        :url="url"
        @loadBefore="loadBefore"
        :index="true"
        @rowClick="rowClick"

      ></vol-table>
    </div>
  </div>
  <div slot="footer">
            <Button type="success"
                    @click="getForm">确定</Button>

            <Button type="info"
                    @click="model.box1=false">
              <Icon type="md-close" />关闭
            </Button>
    </div>
   </vol-box>
</template>
<script>
import VolTable from "@/components/basic/VolTable.vue";
import VolHeader from "@/components/basic/VolHeader.vue";
import VolForm from "@/components/basic/VolForm.vue";
import VolBox from "@/components/basic/VolBox.vue";
export default {
  components: { VolTable, VolHeader, VolForm,VolBox },
  created() {

  },
  data() {
    return {
      model: {
        box2: false,
        box1:false,
      },

      distributor:[],
      product:[],
      //查询条件字段
      searchFields: {
        CreateDate1: "",
        productDate: "",
        productid:"",
        UserName: "",
        distributor:"",
        product:"",
        nametype:""
      },
      viewModel: false, //点击单元格时弹出框
      url: "api/v_pro_good_date/getPageData", //后从加载数据的url
      columns: [{field:'id',title:'',type:'int',width:90,hidden:true,readonly:true,require:true,align:'left'},
                {field:'name',title:'商品名称',type:'string',width:220,align:'left',sortable:true,align:'left'},
                {field:'sellingPrice',title:'售价',type:'string',width:90,align:'left'},
                {field:'preferentialPrice',title:'优惠价',type:'int',width:90,align:'left'},
                {field:'productDate',title:'游玩时间',type:'datetime',width:200,align:'left',sortable:true},
               // {field:'productid',title:'产品类型',type:'string',width:200,align:'left',sortable:true}
                // {field:'modifyID',title:'修改人ID',type:'int',width:90,hidden:true,align:'left'},
                ],  
    };
  },
  methods: {
  rowClick({ row, column, event }) {

  this.$refs.table1.$refs.table.toggleRowSelection(row);
  },
    load() {
      let where = {wheres:[
      //设置为like模糊查询
         { name: "distributionid",value: this.searchFields.distributor, 
        },
        { name: "productid",value: this.searchFields.product, 
        },
        { name: "name",value: this.searchFields.UserName, displayType: "like",
        },
        ]};
      this.$refs.table1.load(where);
    },
   getData(){
     this.http
        .post("/api/Dictionary/GetVueDictionary", ["distributorList","mall_pro"])
        .then((dic) => {
          this.distributor=dic.find(item1 => item1.dicNo == "distributorList").data;
          this.product=dic.find(item1 => item1.dicNo == "mall_pro").data;
          this.$refs.table1.refs.table.reset();
        });
   },
   onChange(){
     console.log("选择供应商");
   },
   loadBefore(param, callBack){
           param.wheres.push({name:"name",value:this.searchFields.name})
           //param.wheres.push( {name:"product", value:this.searchFields.productid})
           //close.log(productid)
          param.wheres.push({name:"distributionid",value:this.searchFields.distributionid});
         // param.wheres.push( { name: "productDate", value: this.searchFields.productDate });
        //   param.wheres.push({name:"productid",value:this.searchFields.productid});
          return true;
        },
    del() {
      let rows = this.$refs.table.getSelected();
      
      if (rows.length == 0) {
        return this.$message.error("请先选中行");
      }
      this.$refs.table1.delRow();
      //此处可以接着写删除后台的代码
    },
   
    getForm() {
      let that= this.$store.getters.data().getGOODList;
      this.$refs.table1.getSelected().forEach(item => {        
        
        var index = that.tableData.findIndex(val=>{
          return val.name == item.name && val.sellingPrice == item.sellingPrice && val.productDate==item.productDate;
          //return val.name == item.name && val.sellingPrice == item.sellingPrice && val.productid == item.productid
        });
        
        if(index >= 0){
          var itemnum = parseInt(that.tableData[index].number) + 1;
          that.tableData[index].name = `${item.name} `;          
          that.tableData[index].number = itemnum;
        }else{
          item.number=+1;
          that.addrows(item);
        }
           
      });
      
      this.model.box1=false;
    },
    open(){
        this.model.box1=true;
        let that= this.$store.getters.data().formFileds;
        this.searchFields.productDate=that.playStartDate;
      //  this.searchFields.productid = that.playStartDate;
        this.getData();
       
    }
  },
};
</script>

<style lang="scss">
 
.rowActive{
    background:#ddd
}
</style>